import React, {FC, useCallback, useEffect, useMemo} from "react";
import {Form, Input} from "antd";
import {defaultLanguage} from "../../../i18n/i18n.tsx";
import {useTranslation} from "react-i18next";
import "./css/InputLocal.less";
import {addOkModal, closeModal} from "../../services/ModalService.tsx";

interface InputLocalModalProps {
    modalKey: string,
    disabled: boolean,
}

const InputLocalModal: FC<InputLocalModalProps> = (props) => {
    const {t} = useTranslation();
    const [form] = Form.useForm();

    const onOk: Function = useCallback(async () => {
        const values: any = await form.validateFields();
        await closeModal(props.modalKey, async () => {
            return {data: values};
        })
    }, []);

    useEffect(() => {
        addOkModal(props.modalKey, onOk);
    }, []);

    const renderInputLocalModal = useMemo(() => {
        return (<Form className="sf_core_input_local_modal" form={form} initialValues={props}>
            {defaultLanguage.map((key: string) => {
                return (
                    <Form.Item
                        key={key}
                        label={t(key)}
                        name={key}
                    >
                        <Input.TextArea disabled={props.disabled}/>
                    </Form.Item>
                )
            })}
        </Form>)
    }, [props]);

    return (renderInputLocalModal)
};

export default React.memo(InputLocalModal)